<template>
  <div class="echarts-d" ref="echarts-d"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "universal-echarts",
  props: {
    options: Object
  },
  data(){
    return{
      myEcharts:null,
    }
  },
  mounted() {
    this.init()
    this.setOptions(this.options)
  },
  watch: {
    options(current){
      if(current){
        this.setOptions(this.options)
      }
    }
  },
  methods: {
    init() {
      this.myEcharts = echarts.init(this.$refs["echarts-d"], null, {renderer: 'svg'});
    },
    setOptions(options) {
      this.myEcharts?.setOption(options, false);
    },
  },
}
</script>

<style lang="scss" scoped>
.echarts-d{
  width: 100%;
  height: 100%;
}
</style>
